<script setup>
import { reactive, toRefs } from "vue";
import { getSearchClassifyCourse } from "../../http/http";
import MyDatails from "../../components/MyDatails.vue";
import MyRecommendCourse from "../../components/MyRecommendCourse.vue";
import { useCounterStore } from "../../stores/counter";
const store = useCounterStore();
const data = reactive({
  searchVal: "",
  SearchList: [],
  historySearch: [],
  historyStatus: true,
});
// 点击搜索
const onSearch = () => {
  let obj = {
    page: 1,
    limit: 15,
    classify_id: "",
    title: data.searchVal,
  };
  //   调用搜索接口
  getSearchClassifyCourse(obj).then((res) => {
    console.log(res);
    data.SearchList = res.data;
  });
  let str = {
    name: data.searchVal,
  };
  data.historySearch.push(str);
  localStorage.setItem("searchlist", JSON.stringify(data.historySearch));
  data.historySearch = JSON.parse(localStorage.getItem("searchlist")) || [];
};
data.historySearch = JSON.parse(localStorage.getItem("searchlist")) || [];

const fn = async () => {
  let obj = {
    page: 1,
    limit: 15,
    classify_id: "",
    title: data.searchVal,
  };
  let res = await getSearchClassifyCourse(obj);
};
// 输入框清空事件
const op = () => {
  if (data.searchVal == "") {
    data.SearchList = [];
    data.historyStatus = true;
  } else {
    data.historyStatus = false;
  }
};
// 点击删除历史记录
const delHistory = () => {
  data.historyStatus = false;
  localStorage.removeItem("searchlist");
};

const { searchVal, SearchList, historySearch, historyStatus } = toRefs(data);
</script>
<template>
  <div class="search">
    <!-- 搜索 -->
    <div class="search_header_pro">
      <div class="search_header">
        <van-icon name="arrow-left" @click="$router.back" />
        <van-search
          v-model="searchVal"
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          :clearable="false"
          @update:model-value="op"
        />
        <div
          class="onClickButton"
          v-if="searchVal.length > 0"
          @click="onSearch"
        >
          搜索
        </div>
        <div class="onClickButton" v-else>取消</div>
      </div>
    </div>
    <!-- 搜索内容 -->
    <div class="search_box">
      <div class="search_box_title" v-show="historyStatus">
        <h2>历史搜索</h2>
        <van-icon name="delete-o" size="20px" @click="delHistory" />
      </div>
      <div class="histor" v-show="historyStatus">
        <van-tag
          type="primary"
          size="large"
          v-for="(item, index) in historySearch"
          :key="index"
          >{{ item.name }}
        </van-tag>
      </div>
      <MyRecommendCourse :RecommendCourseList="SearchList"></MyRecommendCourse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.search {
  width: 750px;

  .search_header_pro {
    width: 750px;
    padding: 0 20px;

    // position: fixed;
    // left: 0;
    // top: 20px;
    .search_header {
      display: flex;
      align-items: center;
      border-bottom: 1px #ccc solid;

      .van-search {
        flex: 1;
      }

      .onClickButton {
        font-size: 28px;
      }
    }
  }

  .search_box {
    // margin-top: 150px;
    margin-top: 15px;

    .search_box_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 25px;
      color: #333;
      font-weight: 700;
      padding: 0 20px;
    }
  }
}

::v-deep .van-tag {
  margin-left: 20px;
}
</style>
